<template>
  <div>
    <van-list v-model="loading"
              :finished="finished"
              :immediate-check="false"
              finished-text="没有更多了"
              @load="getIncomeList">
      <van-cell v-for="item in list" :key="item.id">
        <template>
          <div class="cell_template">
            <div>
              <div style="width: 50%;float: left;font-weight: 600;">{{item.nickname}}</div>
              <div style="width: 50%;float: right;color: #ff4444">{{item.price  * 100 | yuan}}</div>
            </div>
            <div>
              <div style="width: 50%;float: left;">收益类型</div>
              <div style="width: 50%;float: right;">体验商品佣金</div>
            </div>
            <div>
              <div style="width: 50%;float: left;">订单号:{{item.order_sn}}</div>
              <div style="width: 50%;float: right;">订单总金额:{{item.actual_price  * 100 | yuan}}</div>
            </div>
            <div>
              <div style="width: 50%;float: left;">状态:{{item.status == 0 ? '入账中' : '已入账'}}</div>
              <div style="width: 50%;float: right;">{{item.add_time}}</div>
            </div>
            <div>
              订单描述:
            </div>
            <div>
              <div v-for="goods in item.goodsVoList" :key="goods.id" >
                <div>{{goods.goodsName}}   {{goods.price}} x {{goods.number}}</div>
              </div>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import {List, Panel} from 'vant';
import {userIncomeList} from "@/api/api";

export default {
  name: 'user-income-list',
  created() {
    this.init();
  },
  data() {
    return {
      list: [],
      page: 0,
      limit: 10,
      loading: false,
      finished: false,
      incomeType:null,
    };
  },
  methods: {
    init() {
      this.page = 0;
      this.list = [];
      this.incomeType = this.$route.query.incomeType;
      this.getIncomeList();
    },
    getIncomeList() {
      this.page++;
      userIncomeList({
        status: this.activeIndex,
        type: this.activeIndex,
        showType: this.incomeType,
        page: this.page,
        limit: this.limit
      }).then(res => {
        this.list.push(...res.data.data.list);
      });
    },
    handleTabClick() {
      this.page = 0;
      this.list = [];
      this.getIncomeList();
    }
  },
  components: {
    [Panel.name]: Panel,
    [List.name]: List,
  }
};
</script>
<style lang="scss" scoped>
.cell_template{
  font-size: 12px;
  div{
    width: 100%;
  }
}
.van-cell {
  border-bottom: 1px solid #1989fa;
  margin: 5px 0px 0px 0px;
}
</style>
